<template>
    <div>
        <Card>
            <i-form ref="formCustom" :model="formCustom" :label-width="100"  >
                <FormItem
                        v-for="(item, index) in formCustom.items"
                        :key="index">
                    <Row v-if="item.status">
                        <Col span="6">
                            <Row>
                                <Col span="3">批次</col>
                                <Col span="21">
                                    <Input type="text" v-model="item.batch" placeholder="请输入"></Input>
                                </Col>
                            </Row>
                        </Col>
                        <Col span="6">
                            <Row>
                                <Col span="3"> 人数</col>
                                <Col span="21">
                                    <Input type="text" v-model="item.people" placeholder="请输入"></Input>
                                </Col>
                            </Row>
                        </Col>
                        <Col span="6">
                            <Row>
                                <Col span="3"> 领队</col>
                                <Col span="21">
                                    <Input type="text" v-model="item.leader" placeholder="请输入"></Input>
                                </Col>
                            </Row>
                        </Col>
                        <Col span="4" offset="1">
                            <Button @click="handleRemove(index)">删除</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Row>
                        <Col span="12">
                            <Button type="dashed"  @click="handleAdd" icon="md-add">添加</Button>
                        </Col>
                    </Row>
                </FormItem>

            </i-form>
        </Card>

        <div class="submit-button">
            <i-button type="primary" @click="handleSubmit('formCustom')">添加</i-button>
        </div>

        <i-table  border :columns="columns2" :data="data4"></i-table>
        <Page :total="100" :current="1" @on-change="changePage"></Page>
    </div>

</template>

<script>
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.formCustom.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField('passwdCheck')
        }
        callback()
      }
    }
    console.log(validatePass)
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formCustom.passwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    console.log(validatePassCheck)
    const validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      // 模拟异步验证效果
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'))
          } else {
            callback()
          }
        }
      }, 1000)
    }
    console.log(validateAge)
    return {
      index: 1,
      formCustom: {
        items: [
          {
            batch: '',
            people: '',
            leader: '',
            index: 1,
            status: 1
          }
        ]
      },
      columns2: [
        {
          title: '批次',
          key: 'batch',
          align: 'center'
        },
        {
          title: '人数',
          key: 'people',
          align: 'center'
        },
        {
          title: '领队',
          key: 'leader',
          align: 'center'

        }
      ],
      data4: []
    }
  },
  mounted () {
    const data = []
    for (let i = 0; i < 20; i++) {
      data.push({
        key: i,
        batch: i + 45,
        people: i + 68,
        leader: i + 15
      })
    }
    this.data4 = data
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    handleAdd () {
      this.index++
      this.formCustom.items.push({
        batch: '',
        people: '',
        leader: '',
        index: 1,
        status: 1
      })
    },
    handleRemove (index) {
      if (this.formCustom.items.length <= 1) return
      this.formCustom.items.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>

<style>
    .submit-button{
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 ;
    }
</style>
